<template>
  <div class="input_div">
    <span style="margin-right: 10px;" v-if="title">{{title}}</span>
    <div class="color_div">

      <div class="input-with-reset">
        <el-color-picker size="medium" @active-change="activechange" v-model="color[name]"></el-color-picker>
        <el-input size="medium" class="" v-model="color[name]"></el-input>
        <el-button size="medium" @click="color[name] = defaultcolor" type="text">重置</el-button>
        <!--  <el-input size="medium" class="" v-model="color[name]">
          <template slot="prepend">
            <el-color-picker size="medium" @active-change="activechange" v-model="color[name]"></el-color-picker>
          </template>
          <el-button size="medium" @click="color[name] = defaultcolor" slot="append">重置</el-button>
        </el-input> -->
      </div>
    </div>
  </div>

</template>

<script>
import {colorRGBtoHex} from '@/utils/index';
export default {
  props: {
    color: {
      type: Object,
      default: {}
    },
    name: {
      type: String,
      default: 'bg'
    },
    title:{
      type:String
    }
  },
  data() {
    return {
      defaultcolor: ''
    };
  },
  mounted() {
    this.defaultcolor = this.color[this.name];
  },
  methods: {
    activechange(a) {
      let b = colorRGBtoHex(a);
      this.color[this.name] = b;
    }
  }
};
</script>

<style lang="scss">
.color_div {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  width: 240px;
  background: #fff;
  // margin-left: 20px;
  // height: 36px;
  .input-with-reset {
    display: flex;
    align-items: center;
    margin-left: 10px;
    .el-color-picker__trigger {
      border: none;
      width: 36px !important;
      height: 36px !important;
      display: flex;
      align-items: center;
      .el-color-picker__icon {
        color: transparent;
      }
    }
    .el-input {
      input {
        border: none;
        // border-left: none;
        // border-right: none;
        border-radius: 0;
        outline: none;
      }
    }
    .el-button {
      padding: 0 20px;
    }
  }
}

</style>
